<template>
  <div>
    <div class="img"></div>
    <h1>测试Vue图片的引入</h1>
    <el-image :src="url"></el-image>
    <el-image :src="url2"></el-image>
    <img src="@/assets/logo.png">
    <img :src="url">
    <img :src="url3">
    <img :src="url">
    <!--vue中为什么不能直接引入图片？ 
    在vue中不使用require引入的话，会被解析为字符串，而不是路径
      vue在DOM中直接引入的图片会被转为 base64 格式的，但是使用变量引入的话，图片不会转为 base64 格式的，所以不会正常显示
      解决方法就是变量使用 require 来引入图片或者引用网络地址。
    -->
    
    
  </div>

</template>

<script>
import image from '@/assets/logo.png'

export default {
  name: "ImageList",
  data() {
    return {
      url: require('../../assets/logo.png'),
      url2: '../../assets/logo.png',
      url3: image

    }
  },
}
</script>
<style scoped>
.img {
  width: 200px;
  height: 200px;
  background: url(../../assets/logo.png) 0 0 no-repeat; 
}

</style>